<template>
  <div class="form-block-inner">
    <Form
      ref="formItem"
      :rules="ruleValidate"
      :model="formItem"
      label-position="top"
    >
      <div class="title-style">基本信息</div>
      <Row :gutter="16">
        <!--<Col span="6">
                    <FormItem prop="shi_quan_type" label="设定事权类型:">
                        <div class="form-element">
                            <Input v-model="formItem.shi_quan_type" clearable placeholder="请填写事权类型"/>
                        </div>
                    </FormItem>
                </Col>-->
        <Col span="8">
          <FormItem prop="title" label="填报事项名称:">
            <!--<span slot="label">填报事项名称:
                            <Tooltip content="填报事项名称的说明........" placement="right" theme="light">
                                <Icon type="md-help-circle" class="excel-help"/>
                            </Tooltip>
                        </span>-->
            <Input v-model="title" readonly placeholder="请选择事项库" />
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem prop="xing_quan_code" label="行权事项编码:">
            <Input
              v-model="formItem.xing_quan_code"
              readonly
              placeholder="请选择事项库"
            />
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label=" ">
            <Button @click="powerChooseOption">选择事项库</Button>
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem prop="shi_quan_type" label="设定事项责任:">
            <div class="form-element">
              <Input
                v-model="formItem.shi_quan_type"
                type="textarea"
                readonly
                :autosize="{ minRows: 3, maxRows: 3 }"
                placeholder="请选择事项库"
              ></Input>
            </div>
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem prop="shi_xiang_remark" label="填写事项说明：">
            <Input
              v-model="formItem.shi_xiang_remark"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 3 }"
              placeholder="请填写事项说明"
            ></Input>
          </FormItem>
        </Col>
        <Col span="24">
          <Row :gutter="16">
            <Col span="8">
              <FormItem prop="jue_ding_gov" label="决定机构:">
                <div class="form-element">
                  <Input
                    v-model="formItem.jue_ding_gov"
                    clearable
                    placeholder="请填写决定机构"
                  />
                </div>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem prop="jue_ding_gov_xing_zhi" label="决定机构性质:">
                <div class="form-element">
                  <Select
                    clearable
                    v-model="formItem.jue_ding_gov_xing_zhi"
                    style="width: 100%"
                  >
                    <Option
                      v-for="(item, index) in jdgxzList"
                      :value="item.value"
                      :key="index"
                    >
                      {{ item.label }}
                    </Option>
                  </Select>
                </div>
              </FormItem>
            </Col>
            <Col span="8" v-if="formItem.jue_ding_gov_xing_zhi == 4">
              <FormItem prop="cus_jdgxz" label="决定机构性质（自定义）:">
                <div class="form-element">
                  <Input
                    v-model="formItem.cus_jdgxz"
                    clearable
                    placeholder="请填写自定义决定机构性质"
                  />
                </div>
              </FormItem>
            </Col>
          </Row>
        </Col>
        <Col span="24">
          <Row :gutter="16">
            <Col span="8">
              <FormItem prop="shou_li_gov" label="受理机构:">
                <div class="form-element">
                  <Input
                    v-model="formItem.shou_li_gov"
                    clearable
                    placeholder="请填写受理事项机构"
                  />
                </div>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem prop="shou_li_gov_xing_zhi" label="受理机构性质:">
                <Select
                  clearable
                  v-model="formItem.shou_li_gov_xing_zhi"
                  style="width: 100%"
                >
                  <Option
                    v-for="(item, index) in slgxzList"
                    :value="item.value"
                    :key="index"
                  >
                    {{ item.label }}
                  </Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8" v-if="formItem.shou_li_gov_xing_zhi == 4">
              <FormItem prop="cus_slgxz" label="受理机构性质（自定义）:">
                <div class="form-element">
                  <Input
                    v-model="formItem.cus_slgxz"
                    clearable
                    placeholder="请填写自定义受理机构性质"
                  />
                </div>
              </FormItem>
            </Col>
          </Row>
        </Col>
        <Col span="18">
          <FormItem prop="san_ding_yi_ju" label="三定方案依据：">
            <Input
              clearable
              v-model="formItem.san_ding_yi_ju"
              placeholder="请填写三定方案依据"
            ></Input>
          </FormItem>
        </Col>
        <Col span="4">
          <FormItem prop="san_ding_yi_ju_url" label="依据材料：">
            <Button
              icon="ios-cloud-upload-outline"
              @click="uploadImgAction('san_ding')"
              >上传</Button
            >
            <span class="upload-icon">
              <Icon
                :type="
                  formItem.san_ding_yi_ju_url
                    ? 'md-checkmark-circle'
                    : 'md-close-circle'
                "
                :color="formItem.san_ding_yi_ju_url ? 'green' : 'red'"
                size="18"
              />
            </span>
          </FormItem>
        </Col>
        <Col span="18">
          <FormItem prop="fa_lv_fa_gui_yi_ju" label="法律法规依据：">
            <Input
              clearable
              v-model="formItem.fa_lv_fa_gui_yi_ju"
              placeholder="请填写法律法规依据"
            ></Input>
          </FormItem>
        </Col>

        <Col span="4">
          <FormItem prop="fa_lv_fa_gui_yi_ju_url" label="依据材料：">
            <Button
              icon="ios-cloud-upload-outline"
              @click="uploadImgAction('fa_lv_fa_gui')"
              >上传</Button
            >
            <span class="upload-icon">
              <Icon
                :type="
                  formItem.fa_lv_fa_gui_yi_ju_url
                    ? 'md-checkmark-circle'
                    : 'md-close-circle'
                "
                :color="formItem.fa_lv_fa_gui_yi_ju_url ? 'green' : 'red'"
                size="18"
              />
            </span>
          </FormItem>
        </Col>
        <Col span="18">
          <FormItem prop="wen_jian_yi_ju" label="国家、省、市相关文件依据：">
            <Input
              clearable
              v-model="formItem.wen_jian_yi_ju"
              placeholder="请填写国家、省、市相关文件依据"
            ></Input>
          </FormItem>
        </Col>
        <Col span="4">
          <FormItem prop="wen_jian_yi_ju_url" label="依据材料：">
            <Button
              icon="ios-cloud-upload-outline"
              @click="uploadImgAction('wen_jian')"
              >上传</Button
            >
            <span class="upload-icon">
              <Icon
                :type="
                  formItem.wen_jian_yi_ju_url
                    ? 'md-checkmark-circle'
                    : 'md-close-circle'
                "
                :color="formItem.wen_jian_yi_ju_url ? 'green' : 'red'"
                size="18"
              />
            </span>
          </FormItem>
        </Col>
        <Col span="18">
          <FormItem prop="ban_jian_xing_shi" label="办理形式:">
            <CheckboxGroup v-model="formItem.ban_jian_xing_shi">
              <Checkbox label="窗口办理"></Checkbox>
              <Checkbox label="网上办理"></Checkbox>
              <Checkbox label="快递申请"></Checkbox>
              <Checkbox label="受办分离"></Checkbox>
              <Checkbox label="监督检查"></Checkbox>
              <Checkbox label="举报投诉"></Checkbox>
              <Checkbox label="书面申请"></Checkbox>
            </CheckboxGroup>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem prop="is_shou_fei" label="是否收费:">
            <RadioGroup v-model="formItem.is_shou_fei">
              <Radio label="1">收费</Radio>
              <Radio label="2">不收费</Radio>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem prop="ban_jian_type" label="办件类型:">
            <RadioGroup v-model="formItem.ban_jian_type">
              <Radio label="1">即办件</Radio>
              <Radio label="2">承诺件</Radio>
              <Radio label="3">其他</Radio>
            </RadioGroup>
          </FormItem>
        </Col>
        <template v-if="formItem.ban_jian_type == '2'">
          <Col span="12">
            <FormItem prop="date_type" label="承诺期限类型:">
              <RadioGroup v-model="formItem.date_type">
                <Radio label="1">自然日</Radio>
                <Radio label="2">工作日</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem prop="zhou_qi" label="承诺期限（天）:">
              <div class="form-element">
                <Input
                  clearable
                  v-model="formItem.zhou_qi"
                  placeholder="事项办理总期限"
                />
              </div>
            </FormItem>
          </Col>
        </template>
        <Col span="24">
          <FormItem prop="fu_wu_dui_xiang" label="服务对象:">
            <CheckboxGroup v-model="formItem.fu_wu_dui_xiang">
              <Checkbox label="自然人"></Checkbox>
              <Checkbox label="企业法人"></Checkbox>
              <Checkbox label="事业法人"></Checkbox>
              <Checkbox label="社会组织法人"></Checkbox>
              <Checkbox label="非法人企业"></Checkbox>
              <Checkbox label="行政机关"></Checkbox>
              <Checkbox label="其他组织"></Checkbox>
            </CheckboxGroup>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem prop="ban_li_address" label="办理地点:">
            <div class="form-element">
              <Input
                clearable
                v-model="formItem.ban_li_address"
                placeholder="请填写受理事项机构的地址"
              />
            </div>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem prop="work_run_time" label="工作时间:">
            <div class="form-element">
              <Input
                clearable
                v-model="formItem.work_run_time"
                placeholder="请填写受理事项机构的工作时间"
              />
            </div>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem prop="zi_xun_type" label="咨询方式:">
            <div class="form-element">
              <Input
                clearable
                v-model="formItem.zi_xun_type"
                placeholder="请填写咨询方式"
              />
            </div>
          </FormItem>
        </Col>
      </Row>
      <Divider />
      <div class="button-group">
        <Button type="primary" @click="saveBtnAction" :loading="btnLoading"
          >保存数据</Button
        >
      </div>
    </Form>
    <import-imgs
      ref="imgService"
      @result="importImgsResultAction"
    ></import-imgs>
    <option-modal
      :base-type="formItem.type"
      ref="optionModal"
      :modal-title="modalTitle"
      :dataObj="modalData"
      @saveOption="saveOption"
    ></option-modal>
  </div>
</template>

<script>
import {
  insertSstGovBase,
  updateSstGovBase,
  selectSstGovBaseById,
} from "@/api/setting/base-info";
import OptionModal from "./components/option-modal/index";
import ImportImgs from "./components/import-imgs/index";

export default {
  name: "BaseInfo",
  components: { ImportImgs, OptionModal },
  data() {
    const validateTitle = (rule, value, callback) => {
      if (!this.title) {
        callback(new Error("填报事项名称不能为空"));
      } else {
        callback();
      }
    };
    const validateBJXS = (rule, value, callback) => {
      if (this.formItem.ban_jian_xing_shi.length === 0) {
        callback(new Error("办理形式不能为空"));
      } else {
        callback();
      }
    };
    const validateFWDX = (rule, value, callback) => {
      if (this.formItem.fu_wu_dui_xiang.length === 0) {
        callback(new Error("服务对象不能为空"));
      } else {
        callback();
      }
    };
    const validateJDGXZ = (rule, value, callback) => {
      if (this.formItem.jue_ding_gov_xing_zhi === "4" && !value) {
        callback(new Error("自定义决定机构性质不能为空"));
      } else {
        callback();
      }
    };
    const validateSLGXZ = (rule, value, callback) => {
      if (this.formItem.shou_li_gov_xing_zhi === "4" && !value) {
        callback(new Error("自定义受理机构性质不能为空"));
      } else {
        callback();
      }
    };
    const validateDT = (rule, value, callback) => {
      if (this.formItem.ban_jian_type === "2" && !value) {
        callback(new Error("承诺期限类型不能为空"));
      } else {
        callback();
      }
    };
    const validateZQ = (rule, value, callback) => {
      if (this.formItem.ban_jian_type === "2" && !value) {
        callback(new Error("承诺期限不能为空"));
      } else {
        callback();
      }
    };
    return {
      ruleValidate: {
        // shi_quan_type: [
        //   { required: true, message: '设定事权类型不能为空', trigger: 'blur' }
        // ],
        // shi_quan_type: [
        //   { required: true, message: '事项责任不能为空', trigger: 'blur' }
        // ],
        title: [{ required: true, validator: validateTitle, trigger: "blur" }],
        // xing_quan_code: [
        //   { required: true, message: '行权事项编码不能为空', trigger: 'blur' }
        // ],
        // shi_xiang_remark: [
        //   { required: true, message: '事项说明不能为空', trigger: 'blur' }
        // ],
        jue_ding_gov: [
          { required: true, message: "决定机构不能为空", trigger: "blur" },
        ],
        jue_ding_gov_xing_zhi: [
          {
            required: true,
            message: "决定机构性质不能为空",
            trigger: "change",
          },
        ],
        cus_jdgxz: [
          { required: true, validator: validateJDGXZ, trigger: "blur" },
        ],
        shou_li_gov: [
          { required: true, message: "受理机构不能为空", trigger: "blur" },
        ],
        shou_li_gov_xing_zhi: [
          {
            required: true,
            message: "受理机构性质不能为空",
            trigger: "change",
          },
        ],
        cus_slgxz: [
          { required: true, validator: validateSLGXZ, trigger: "blur" },
        ],
        // san_ding_yi_ju: [
        //   { required: true, message: '三定方案依据不能为空', trigger: 'blur' }
        // ],
        // fa_lv_fa_gui_yi_ju: [
        //   { required: true, message: '法律法规依据不能为空', trigger: 'blur' }
        // ],
        // wen_jian_yi_ju: [
        //   { required: true, message: '国家、省、市相关文件依据不能为空', trigger: 'blur' }
        // ],
        ban_jian_xing_shi: [
          { required: true, validator: validateBJXS, trigger: "change" },
        ],
        is_shou_fei: [
          { required: true, message: "是否收费不能为空", trigger: "change" },
        ],
        ban_jian_type: [
          { required: true, message: "办件类型不能为空", trigger: "change" },
        ],
        date_type: [
          { required: true, validator: validateDT, trigger: "change" },
        ],
        zhou_qi: [{ required: true, validator: validateZQ, trigger: "blur" }],
        fu_wu_dui_xiang: [
          { required: true, validator: validateFWDX, trigger: "change" },
        ],
      },
      formItem: {
        // shi_quan_type: '',
        project_name: "",
        subitem: "",
        xing_quan_code: "",
        shi_xiang_remark: "",
        jue_ding_gov: "",
        jue_ding_gov_xing_zhi: "",
        cus_jdgxz: "",
        shou_li_gov: "",
        shou_li_gov_xing_zhi: "",
        cus_slgxz: "",
        ban_jian_xing_shi: [],
        ban_jian_type: "",
        san_ding_yi_ju: "",
        san_ding_yi_ju_url: "",
        fa_lv_fa_gui_yi_ju: "",
        fa_lv_fa_gui_yi_ju_url: "",
        wen_jian_yi_ju: "",
        wen_jian_yi_ju_url: "",
        zhou_qi: "",
        is_shou_fei: "",
        fu_wu_dui_xiang: [],
        ban_li_address: "",
        work_run_time: "",
        zi_xun_type: "",
        date_type: "",
        type: "",
        xing_quan_sub_code: "",
        // duty_matter: '',
        // action_subject: '',
        // code: '',
        // sub_code: ''
      },
      btnLoading: false,
      powerList: [],
      jdgxzList: [
        {
          value: "1",
          label: "法定机关",
        },
        {
          value: "2",
          label: "授权组织",
        },
        {
          value: "3",
          label: "受委托组织",
        },
        {
          value: "4",
          label: "其它",
        },
      ],
      slgxzList: [
        {
          value: "1",
          label: "法定机关",
        },
        {
          value: "2",
          label: "授权组织",
        },
        {
          value: "3",
          label: "受委托组织",
        },
        {
          value: "4",
          label: "其它",
        },
      ],
      modalTitle: "",
      modalWidth: 500,
      modalType: "",
      modalData: {},
      optionType: "add",
      baseID: "",
    };
  },
  computed: {
    getUploadUrl() {
      return this.$config.upLoadFileUrl;
    },
    title() {
      if (this.formItem.project_name && !this.formItem.subitem) {
        return this.formItem.project_name;
      } else if (this.formItem.project_name && this.formItem.subitem) {
        return (
          this.formItem.project_name + " （ " + this.formItem.subitem + " ）"
        );
      } else {
        return "";
      }
    },
  },
  props: {
    baseType: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.baseID = this.$route.query.id;
      this.optionType = "edit";
      this.getInfoByID();
    } else {
      this.optionType = "add";
    }
  },
  methods: {
    success(val) {
      val = this.$common.xeUtils.isEmpty(val) ? "操作成功" : val;
      this.$Message.success(val);
    },
    error(data) {
      this.$Message.error({
        content: "操作失败,\n" + data.errmsg,
      });
    },
    powerChooseOption() {
      this.modalTitle = "选择事权";
      this.$refs.optionModal.modelAction();
    },
    // 编辑时获取信息
    getInfoByID() {
      selectSstGovBaseById({ id: this.baseID }).then((ret) => {
        let data = ret.data;
        if (data.errcode === 0) {
          this.formItem = data.data;
          if (this.formItem.type) {
            this.$refs.optionModal.init({ type: this.formItem.type });
          } else {
            this.$Message.error("缺少参数！");
            this.$router.push({ name: "RouterList" });
          }
        } else {
          this.error(data);
        }
      });
    },
    uploadImgAction(type) {
      let path = "";
      switch (type) {
        case "san_ding":
          path = this.formItem.san_ding_yi_ju_url;
          break;
        case "fa_lv_fa_gui":
          path = this.formItem.fa_lv_fa_gui_yi_ju_url;
          break;
        case "wen_jian":
          path = this.formItem.wen_jian_yi_ju_url;
          break;
      }
      this.$refs.imgService.modelAction(type, path);
    },
    importImgsResultAction(path, type) {
      switch (type) {
        case "san_ding":
          this.$delete(this.formItem, "san_ding_yi_ju_url");
          this.formItem.san_ding_yi_ju_url = path;
          // this.$set(this.formItem, 'san_ding_yi_ju_url', path)
          break;
        case "fa_lv_fa_gui":
          this.$delete(this.formItem, "fa_lv_fa_gui_yi_ju_url");
          this.formItem.fa_lv_fa_gui_yi_ju_url = path;
          // this.$set(this.formItem, 'fa_lv_fa_gui_yi_ju_url', path)
          break;
        case "wen_jian":
          this.$delete(this.formItem, "wen_jian_yi_ju_url");
          this.formItem.wen_jian_yi_ju_url = path;
          // this.$set(this.formItem, 'wen_jian_yi_ju_url', path)
          break;
      }
    },
    // 选择行权后处理
    saveOption(row) {
      // this.$set(this.formItem, 'shi_quan_type', row.duty_matter)
      // this.$set(this.formItem, 'gov_id', row.id)
      // this.$set(this.formItem, 'jue_ding_gov', row.action_subject)
      this.$set(this.formItem, "project_name", row.project_name);
      this.$set(this.formItem, "subitem", row.subitem);
      // this.$set(this.formItem, 'xing_quan_code', row.code)
      // this.$set(this.formItem, 'xing_quan_sub_code', row.sub_code)
      this.formItem.shi_quan_type = row.duty_matter;
      this.formItem.gov_id = row.id;
      this.formItem.jue_ding_gov = row.action_subject;
      // this.formItem.project_name = row.project_name
      // this.formItem.subitem = row.subitem
      this.formItem.xing_quan_code = row.code;
      this.formItem.xing_quan_sub_code = row.sub_code;
    },
    // 保存表单信息
    saveBtnAction(formItem) {
      // if (!this.formItem.san_ding_yi_ju_url) {
      //   this.$Message.warning('请上传三定方案依据材料')
      //   return false
      // }
      // if (!this.formItem.fa_lv_fa_gui_yi_ju_url) {
      //   this.$Message.warning('请上传法律法规依据材料')
      //   return false
      // }
      // if (!this.formItem.wen_jian_yi_ju_url) {
      //   this.$Message.warning('请上传国家、省、市相关文件依据依据材料')
      //   return false
      // }
      let param = {};
      if (this.optionType === "add") {
        param = this.formItem;
        this.$delete(param, "id");
      } else if (this.optionType === "edit") {
        param = this.formItem;
        if (this.$route.query.id) param.id = this.$route.query.id;
      }
      // 数据校验
      this.$refs["formItem"].validate((valid) => {
        if (valid) {
          if (this.optionType === "add") {
            this.addDataAction(param);
          } else if (this.optionType === "edit") {
            this.updateDataAction(param);
          }
        } else {
          this.$Message.error({
            content: "操作失败,请核对添加信息后重试",
          });
        }
      });
    },
    updateDataAction(param) {
      this.btnLoading = true;
      updateSstGovBase(param).then((ret) => {
        let data = ret.data;
        if (data.errcode === 0) {
          this.btnLoading = false;
          this.$refs.optionModal.init({ type: this.formItem.type });
          this.success();
        } else {
          this.btnLoading = false;
          this.error(data);
        }
      });
    },
    addDataAction(param) {
      if (this.$route.query.type) {
        param.type = this.$common.xeUtils
          .clone(this.$route.query.type, true)
          .toString();
      } else {
        this.$Message.error("缺少参数！");
        return false;
      }
      this.btnLoading = true;
      insertSstGovBase(param).then((ret) => {
        let data = ret.data;
        if (data.errcode === 0) {
          this.btnLoading = false;
          this.$emit("result", data.data.result);
          this.$router.push({
            name: "rulePageList",
            query: { id: data.data.result, type: param.type },
          });
          this.$refs.optionModal.init({ type: this.formItem.type });
          this.optionType = "edit";
          this.success();
        } else {
          this.btnLoading = false;
          this.error(data);
        }
      });
    },
  },
  watch: {
    formItem(val) {
      // 数据处理
      this.formItem.shi_quan_type = val.duty_matter
        ? val.duty_matter
        : this.formItem.shi_quan_type;
      this.formItem.jue_ding_gov = val.action_subject
        ? val.action_subject
        : this.formItem.jue_ding_gov;
      this.formItem.xing_quan_code = val.code
        ? val.code
        : this.formItem.xing_quan_code;
      this.formItem.xing_quan_sub_code = val.sub_code
        ? val.sub_code
        : this.formItem.xing_quan_sub_code;
      // 多选组为null处理
      if (val.fu_wu_dui_xiang) {
        if (typeof val.fu_wu_dui_xiang === "string")
          JSON.parse(val.fu_wu_dui_xiang);
      } else {
        val.fu_wu_dui_xiang = [];
      }
      if (val.ban_jian_xing_shi) {
        if (typeof val.ban_jian_xing_shi === "string")
          JSON.parse(val.ban_jian_xing_shi);
      } else {
        val.ban_jian_xing_shi = [];
      }
      // 转成数组
      // eslint-disable-next-line no-eval
      if (val.fu_wu_dui_xiang) val.fu_wu_dui_xiang = eval(val.fu_wu_dui_xiang);
      // eslint-disable-next-line no-eval
      if (val.ban_jian_xing_shi)
        val.ban_jian_xing_shi = eval(val.ban_jian_xing_shi);
      // 图片为null处理
      val.san_ding_yi_ju_url = val.san_ding_yi_ju_url
        ? val.san_ding_yi_ju_url
        : "";
      val.fa_lv_fa_gui_yi_ju_url = val.fa_lv_fa_gui_yi_ju_url
        ? val.fa_lv_fa_gui_yi_ju_url
        : "";
      val.wen_jian_yi_ju_url = val.wen_jian_yi_ju_url
        ? val.wen_jian_yi_ju_url
        : "";
    },
    "formItem.type"(val) {
      // console.log('----form-type-----', typeof (val))
      val = val.toString();
    },
    baseType(data) {
      this.baseType = data.toString();
      this.formItem.type = data.toString();
      if (this.baseType !== "")
        this.$refs.optionModal.init({ type: this.baseType });
    },
  },
};
</script>

<style scoped lang="less">
.tag-box {
  margin-bottom: 10px;
}

/deep/ .ivu-col-span-2 {
  margin-top: 23px;
}

.button-group {
  text-align: center;
}

.upload-icon {
  padding-left: 10px;
}

/deep/ .ivu-tooltip {
  /*width: 100%;*/
}

.excel-help {
  display: inline-block;
  margin-left: 10px;
  font-size: 16px;
  color: orange;
  cursor: pointer;
}
</style>
